<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>专家讲座</title>
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../../css/utils.css" />
		<style>
			#serachzjjz{
				position: fixed;
				width: 100%;
				height: 40px;
				top: 10px;
				background-color: #fafafa;
			}
		</style>
	</head>
	<body>
		<div id="serachzjjz" style="">
			<input type="search" placeholder="Search" style="height: 30px; background-color: white; font-size: 17px;"/>
		</div>
		<div class="mui-content">
			<div id="rfexpLec" class="mui-scroll-wrapper" style="height: 92%; top: 60px;">
				<div class="mui-scroll">
					<div id="expLeclst" style="margin: 4px 15px 4px 15px;">
						<!--
                        	作者：xuzhao_deng@sina.com
                        	时间：2017-01-06
                        	描述：好文列表数据展示区
                        -->
                        
                        <!--<div style="margin: 10px 0px 10px 0px;">
							<span style="display: block;">
								<img src="../../img/livehall/zjjzvimg.jpg" style="width: 100%; height: 150px;" />
							</span>
							<span style="display: block; color: #616161; font-size: 15px; margin: 4px 0px 4px 0px;">
								孩子说“我不会”，你听得懂？
							</span>
							<span style="display: block; color: #909090; font-size: 14px; line-height: 130%;">
								在组织幼儿活动时，我们会时常听到幼儿说“我不会”，这种现象在幼儿个年龄段都会出现。
							</span>
							<div style="color: #909090; font-size: 12px; margin-top: 19px;">
								<span style="display: block; float: left;">
									<span>苏轼</span>
									<span style="margin-left: 10px;">
										<img src="../../img/read.png" style="width: 14px;" style="" />&nbsp;9090
									</span>
								</span>
								<span id="spOper" style="display: block; float: right; margin-right: 4px;">
									<div style="display: flex;">
										<div id="dvhideorvisible" class="dvhideorvisible" style="display: none;">
											<div style="background-image: url(../../img/livehall/lankuang_03.png); background-repeat: no-repeat; width: 140px; height: 34px;  color: #FFFFFF; font-size: 10px; display: flex;">
												<div id="spdianzan" style="display: flex; margin-top: 5px; margin-left: 5px;">
													<span style="display: block; margin-top: 4px;">
														<img src="../../img/icon/dianzan_03.png" style="width: 14px;" />
													</span>
													<span style="display: block; margin-top: 2px;">
														赞
													</span>
												</div>
												<div id="spshoucang" style="display: flex; margin-top: 5px; margin-left: 15px;">
													<span style="display: block; margin-top: 4px;">
														<img src="../../img/icon/shoucang_03.png" style="width: 14px;" />
													</span>
													<span style="display: block; margin-top: 2px;">
														收藏
													</span>
												</div>
												<div id="sppinlun" style="display: flex; margin-top: 5px; margin-left: 15px;">
													<span style="display: block; margin-top: 4px;">
														<img src="../../img/icon/pinglun2_03.png" style="width: 14px;" />
													</span>
													<span style="display: block; margin-top: 2px;">
														评论
													</span>
												</div>
												
											</div>
										</div>
										<div style="margin-left: 10px; margin-top: 2px;">
											<img id="imgoper" src="../../img/livehall/pinglun_03.png" style="width: 24px; height: 20px;" />
										</div>
									</div>
									
								</span>
							</div><br />
							<span style="margin-top: 20px; display: block;">
								<hr style="width: 100%; height: 1px; background-color: #F1F1F1;" />
							</span>
						</div>-->
					</div>
				</div>
			</div>
		</div>
	</body>
	
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/utils/http.utils.js"></script>
	<script src="../../js/jquery-1.8.3.min.js"></script>
	<script>
		var $orgId = localStorage.getItem("wxfwid");
		var $currpage = 0;
		mui.init({
			pullRefresh: {
				container: "#rfexpLec",
				up: {
					height: 20,
					auto: true,
					deceleration: 0.0006 ,
					contentrefresh : "加载中...",
					contentnomore:'没有更多数据了',
					callback: loadexpLecLstDat
				}
			}
		});
		
		function loadexpLecLstDat(){
			getExpLecLstDat(2, $currpage);
		}
		
		/**
		 * 加载专家讲座数据
		 * @param {Object} $psize 页容量
		 * @param {Object} $cpage 当前页面
		 */
		function getExpLecLstDat($psize, $cpage){
			mui.ajax({ 
				url : $request_url.getExpLecturesLst,
				type : "get",
				headers: {
					"Authorization": $headers_authorization
				},
				dataType : "json",
				data : {
					typeCode : "ZJJZ",
					orgId : $orgId,
					recommend : "",
					rows : $psize,
					page : $cpage
				}, 
				success : function(dat){
					if(dat.code == 0){
						var $result = dat.result;
						if($result != null && $result != ""){
							$currpage ++;
							mui("#rfexpLec").pullRefresh().endPullupToRefresh(false);
							var $resDoc = document.getElementById("expLeclst");
							for(var i = 0; i < $result.length; i ++){
								var $div = document.createElement("div");
								$div.innerHTML = dataLstTem($result[i], i);
								$resDoc.appendChild($div);
							}
						} else {
							mui("#rfexpLec").pullRefresh().endPullupToRefresh(true);
						}
					} else {
						mui.toast(dat.message);
						return;
					}
				}, error : function(err){
					mui.toast("服务繁忙...");
					return;
				}
			});
		}
		
		/**
		 * 专家讲座数据列表模板
		 * @param {Object} $data
		 * @param {Object} $num
		 */
		function dataLstTem($info, $num){
			var $author = "";
			if($info.author == null || $info.author == ""){
				$author = "345教育";
			} else {
				$author = $info.author;
			}
			var $zjjzlsthtml = 
			'<div style="margin: 10px 0px 10px 0px;">'
			+	'<a href="artdetails.html?artid='+ $info.id +'"><span style="display: block;">'
			+		'<img src="'+ $info.thumbnail +'" style="width: 100%; height: 180px;" />'
			+	'</span>'
			+	'<span style="display: block; color: #616161; font-size: 15px; margin: 4px 0px 4px 0px;">'+ $info.title +'</span>'
			+	'<span style="display: block; color: #909090; font-size: 14px; line-height: 130%;">'+ $info.contentAbstract +'</span></a>'
			+	'<div style="color: #909090; font-size: 12px; margin-top: 19px;">'
			+		'<span style="display: block; float: left;">'
			+			'<span>主讲专家:'+ $author +'</span>'
			+			'<span style="margin-left: 20px;">'
			+				'<img src="img/read.png" style="width: 14px;" style="" />&nbsp;'+ $info.readCount +'</span>'
			+		'</span>'
			+		'<span id="spOper" style="display: block; float: right; margin-right: 4px;">'
			+			'<div style="display: flex;">'
			+				'<div id="dvhideorvisible" class="dvhideorvisible" style="display: none;">'
			+					'<div style="background-image: url(img/lankuang_03.png); background-repeat: no-repeat; width: 100px; height: 34px;  color: #FFFFFF; font-size: 10px; display: flex; text-align: center;">'
			+						'<div id="spdianzan" data="'+ $info.id +'" class="spdianzan" style="display: flex; margin-top: 5px; width:50%; text-align: center; margin-left:10px;">'
			+							'<span style="display: block; margin-top: 4px;">'
			+								'<img src="img/dianzan_03.png" style="width: 14px;" />'
			+							'</span>'
			+							'<span style="display: block; margin-top: 2px;">'
			+								'赞'
			+							'</span>'
			+						'</div>'
			+						'<div id="spshoucang" data="'+ $info.id +'" class="spshoucang" style="display: flex; margin-top: 5px; width:50%; text-align: center; margin-right:10px;">'
			+							'<span style="display: block; margin-top: 4px;">'
			+								'<img src="img/shoucang_03.png" style="width: 15px;" />'
			+							'</span>'
			+							'<span style="display: block; margin-top: 2px;">'
			+								'收藏'
			+							'</span>'
			+						'</div>'
			+					'</div>'
			+				'</div>'
			+				'<div style="margin-left: 4px; margin-top: 2px;">'
			+					'<img id="imgoper" src="img/pinglun_03.png" style="width: 24px; height: 20px;" />'
			+				'</div>'
			+			'</div>'
			+		'</span>'
			+	'</div><br />'
			+	'<span style="margin-top: 20px; display: block;">'
			+		'<hr style="width: 100%; height: 1px; background-color: #F1F1F1;" />'
			+	'</span>'
			+'</div>';
			return $zjjzlsthtml;
		}
		
		mui("#expLeclst").on("tap", "a", function(){
			mui.openWindow({
				url : this.href
			});
		});
		
		//显示右侧操作栏
		mui("#expLeclst").on("tap", "#imgoper", function(){
			var $ele = this.parentElement.parentElement.firstElementChild;
			if($ele.style.display == "none"){
				$ele.style.display = "";
			} else {
				$ele.style.display = "none";
			}
		});
		 
		//点赞
		mui("#expLeclst").on("tap", ".spdianzan", function(){
			var $zanId = this.getAttribute("data"); //点赞对象id
		});
		
		//收藏
		mui("#expLeclst").on("tap", ".spshoucang", function(){
			var $scId = this.getAttribute("data");
			mui.toast("收藏成功");
		});
		
	</script>
</html>
